<template>
	<div class="bg" @keypress.enter="login">
        <div class="bg-con">
			 <div class="fl imh">
				 <img src="../assets/images/cl.png" width="420" />
			 </div>
			 <div class="fl form">
				 <p class="title">大学习后台管理系统</p>
		
				<el-input v-model="user" placeholder="请输入账户名称" type="text"></el-input>
				<el-input v-model="password" placeholder="请输入登录密码"  type="password"></el-input>
				 <el-button type="primary" round @click="login">登录</el-button>
			 </div>
		</div>    
	</div>
</template>

<script>
 import { getToken, setToken, getName, setName} from '@/utils/auth'
	export default {
		 data() {
            return {
				user:'',
				password:''
            }
		},
		methods:{
			login(){
				let self = this
				if(self.user == ''){
					 self.$message.warning('请输入账户名称')
					return
                }else if (self.password == '') {

					self.$message.warning('请输入登录密码')
					return
				}
				let formData = new FormData()
				formData.append('username', self.user)
				formData.append('password', self.password)
				console.log(6666666);
				self.$http.post('/login',formData,{
							headers: {
							'Content-Type': 'application/x-www-form-urlencoded'
						}
						}).then((response) => {
                            let res = response.data
                            if (res.code == 200) {
                                //错误提示
                               
                                let roleCode = res.data.role
                                let roles = []
                                roles.push(roleCode)
                                //设置token
                                setToken(roleCode)
                                //vuex提交SET_ROLES角色
								self.$store.commit('SET_ROLES', roles)
								self.$store.commit('SET_NAME', res.data.username)
                                // self.$store.commit('SET_ROLES', roles)
                                self.$router.push({
									path:'/'
								})
                            }
                            
                            else{
                                //错误提示
                                self.$message.error(res.message)
                               
                            }
                })
			}
		}
	}
</script>

<style scoped>
.bg{
	position: absolute;
	width: 100%;
	background-image: url('../assets/images/bg.png') ;
	height: 100%;

}
.bg-con{
	background: #fff;
    width: 900px;
    margin: 0px auto;
    height: 400px;
    top: 50%;
    margin-top: -200px;
    position: relative;
	border-radius: 20px;
}
.bg-con img{
	padding: 50px ;
}
.form{
	padding: 30px 10px;
	width: 315px;
}
.form .title{
	text-align: center;
	line-height: 110px;
	height: 110px;
	font-weight: 800;
	font-size: 24px;
}
.el-input{
	margin-bottom: 22px;
}
.el-button.is-round{
	padding: 12px 52px;
	margin-left: 88px;
	margin-top: 10px;
}
</style>